<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh_CN">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

	<%@ include file="/WEB-INF/jsp/common/css.jsp" %>
	<style>
	.tree li {
        list-style-type: none;
		cursor:pointer;
	}
	table tbody tr:nth-child(odd){background:#F4F4F4;}
	table tbody td:nth-child(even){color:#C00;}
	</style>
  </head>

  <body>
    <!-- 顶部栏，经常改变，需要重新编译，动态包含 -->
    <jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
    

    <div class="container-fluid">
      <div class="row">
        <!-- 侧面菜单栏 -->
        <jsp:include page="/WEB-INF/jsp/common/sidebar.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="panel panel-default">
			  <div class="panel-heading">
				<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i>菜单树</h3>
			  </div>
			  <div class="panel-body">
				 <ul id="treeDemo" class="ztree"></ul>
			  </div>
			</div>
        </div>
      </div>
    </div>
    
    <!-- 添加模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
	      </div>
	      <div class="modal-body">
	        <div class="form-group">
	          <input type="hidden" name="pid" id="addModalRolePid">
			  <label for="addModalRoleName">菜单名称</label>
			  <input type="text" class="form-control" name="name" id="addModalRoleName" placeholder="请输入菜单名称">
		    </div>
		    <div class="form-group">
			  <label for="addModalRoleUrl">菜单URL</label>
			  <input type="text" class="form-control" name="url" id="addModalRoleUrl" placeholder="请输入菜单url">
		    </div>
		    <div class="form-group">
			  <label for="addModalRoleIcon">菜单图标</label>
			  <input type="text" class="form-control" name="icon" id="addModalRoleIcon" placeholder="请输入菜单图标">
		    </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button id="saveBtn" type="button" class="btn btn-primary">添加</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 修改模态框 -->
	<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">修改菜单</h4>
	      </div>
	      <div class="modal-body">
	        <div class="form-group">
	          <input type="hidden" name="id" id="updateModalRoleId">
			  <label for="updateModalRoleName">菜单名称</label>
			  <input type="text" class="form-control" name="name" id="updateModalRoleName" placeholder="请输入菜单名称">
		    </div>
		    <div class="form-group">
			  <label for="updateModalRoleUrl">菜单URL</label>
			  <input type="text" class="form-control" name="url" id="updateModalRoleUrl" placeholder="请输入菜单url">
		    </div>
		    <div class="form-group">
			  <label for="updateModalRoleIcon">菜单图标</label>
			  <input type="text" class="form-control" name="icon" id="updateModalRoleIcon" placeholder="请输入菜单图标">
		    </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button id="updateBtn" type="button" class="btn btn-primary">修改</button>
	      </div>
	    </div>
	  </div>
	</div>
	
<div class="modal fade" id="permissionModal" tabindex="-1" role="dialog" aria-labelledby="Modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">给菜单分配权限</h4>
      </div>
      <div class="modal-body">
 			<ul id="assignPermissionTree" class="ztree"></ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="assignPermission" type="button" class="btn btn-primary">分配</button>
      </div>
    </div>
  </div>
</div> 

    <%@ include file="/WEB-INF/jsp/common/js.jsp" %>
    <script type="text/javascript">
    //页面加载完后的事件处理
    $(function () {
		$(".list-group-item").click(function(){
			if ( $(this).find("ul") ) {
				$(this).toggleClass("tree-closed");
				if ( $(this).hasClass("tree-closed") ) {
					$("ul", this).hide("fast");
				} else {
					$("ul", this).show("fast");
				}
			}
		});
		initTree();
	});
    
    function initTree() {
    	var setting = {
   			view: {
				selectedMulti: false,
				addDiyDom: function(treeId, treeNode){
					$("#"+treeNode.tId+"_ico").removeClass();//.addClass();
					$("#"+treeNode.tId+"_span").before("<span class='"+treeNode.icon+"'></span>");
				},
				addHoverDom: function(treeId, treeNode){
					var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
					aObj.attr("href", "javascript:;");
					aObj.removeAttr("target");
					if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
					var s = '<span id="btnGroup'+treeNode.tId+'">';
					//根节点
					if ( treeNode.level == 0 ) {
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')" title="新增功能">&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						//分支节点
					} else if ( treeNode.level == 1 ) {
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
						if (treeNode.children.length == 0) {
							s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')" title="删除功能">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
						}
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')" title="新增功能">&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="assignBtn('+treeNode.id+')" title="分配权限">&nbsp;&nbsp;<i class="fa fa-fw fa-anchor rbg "></i></a>';
						//叶子节点
					} else if ( treeNode.level == 2 ) {
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')" title="删除功能">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
						s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="assignBtn('+treeNode.id+')" title="分配权限">&nbsp;&nbsp;<i class="fa fa-fw fa-anchor rbg "></i></a>';
					}
					s += '</span>';
					aObj.after(s);
				},
				removeHoverDom: function(treeId, treeNode){
					$("#btnGroup"+treeNode.tId).remove();
				}
			},
			data: {
				simpleData: {
					enable: true,
					pIdKey: "pid"
				}
			}
		};
		var zNodes = {};
		var url = "${PATH}/menu/loadTree";
		var json = {};
		$.get(url,json,function(result){
			//返回一个list集合，集合中为TMenu 简单格式的json
			zNodes = result;
			zNodes.push({id: 0, name: "系统菜单", icon: "glyphicon glyphicon-list"});
	    	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	    	var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
	    	treeObj.expandAll(true);
		});
	}
    
    //添加开始===========================
    function addBtn(id){
    	$("#addModal").modal({
    		show: true,
    		backdrop: 'static'
    	});
    	$("#addModal input[name='pid']").val(id);
    }
    
    $("#saveBtn").click(function() {
    	var pid = $("#addModal input[name='pid']").val();
    	var name = $("#addModal input[name='name']").val();
    	var url = $("#addModal input[name='url']").val();
    	var icon = $("#addModal input[name='icon']").val();
    	$.ajax({
			type: "post",
			url: "${PATH}/menu/doAdd",
			data: {
				pid: pid,
				name: name,
				url: url,
				icon: icon
			},
			beforeSend: function() {
				return true;
			},
			success: function(result) {
				if("ok"==result){
					layer.msg("添加成功",{time:1000},function() {
						$("#addModal").modal('hide');
						$("#addModal input[name='pid']").val("");
						$("#addModal input[name='name']").val("");
						$("#addModal input[name='url']").val("");
						$("#addModal input[name='icon']").val("");
						initTree();
					});
				}else{
					layer.msg("添加失败");
				}
			},
			error: function() {
				layer.msg("添加失败,无法连接到服务器");
			}
		});
	});
    //添加结束===========================
    
    //修改开始===========================
    function updateBtn(id){
    	$.get(
			"${PATH}/menu/getMenuById",
			{
				id: id
			},
          	function(data){
				//console.log(data);
				$("#updateModal").modal({
					show: true,
					backdrop: 'static'
				});
				$("#updateModal input[name='id']").val(data.id);
				$("#updateModal input[name='name']").val(data.name);
				$("#updateModal input[name='url']").val(data.url);
				$("#updateModal input[name='icon']").val(data.icon);
          	}
		);
    }
    
    $("#updateBtn").click(function() {
    	var id = $("#updateModal input[name='id']").val();
    	var name = $("#updateModal input[name='name']").val();
    	var url = $("#updateModal input[name='url']").val();
    	var icon = $("#updateModal input[name='icon']").val();
    	$.ajax({
			type: "post",
			url: "${PATH}/menu/doUpdate",
			data: {
				id: id,
				name: name,
				url: url,
				icon: icon
			},
			beforeSend: function() {
				return true;
			},
			success: function(result) {
				if("ok"==result){
					layer.msg("修改成功",{time:1000},function() {
						$("#updateModal").modal('hide');
						$("#updateModal input[name='id']").val("");
						$("#updateModal input[name='name']").val("");
						$("#updateModal input[name='url']").val("");
						$("#updateModal input[name='icon']").val("");
						initTree();
					});
				}else{
					layer.msg("修改失败");
				}
			},
			error: function() {
				layer.msg("修改失败,无法连接到服务器");
			}
		});
	});
    //修改结束===========================
    
    //删除开始===========================
    function deleteBtn(id){
    	layer.confirm("您确定要删除吗?",
			{
				btn: ["确定","取消"]
			},
			function(index) {
				$.post("${PATH}/menu/doDelete", 
				  { id: id },
		          function(data){
					if("ok"==data){
						layer.msg("删除成功",{time:1000},function() {
							initTree();
						});
					}else{
						layer.msg("删除失败");
					}
		          }
				);
				layer.close(index);
			},
			function(index) {
				layer.close(index);
			}
		);
    }
    //删除结束===========================
    	
    //分配权限开始===========================

    var tempMenuid = '';
	function assignBtn(menuid) {
		tempMenuid = menuid;
		//1.初始化权限树，带复选框
		initPermissioinToMenuTree();
		//2.显示模态框，展示权限树
		$("#permissionModal").modal({
			show : true,
			backdrop : "static"
		});
		//3.回显权限树（之前分配过的权限应该被勾选）
		//showMenuPermissions(menuid);
	}
	function initPermissioinToMenuTree() {
		var setting = {
			data : {
				simpleData : {
					enable : true,
					pIdKey : "pid"
				},
				key : {
					url : "xUrl",
					name : "title"
				}
			},
			check : {
				enable : true
			},
			view : {
				addDiyDom : addDiyDom
			}
		};
		//1.加载数据
		$.get("${PATH}/permission/listAllPermissionTree",function(data) {
				//data.push({"id":0,"title":"系统权限","icon":"glyphicon glyphicon-asterisk"});
				var tree = $.fn.zTree.init($("#assignPermissionTree"),setting,data);
				var treeObj = $.fn.zTree.getZTreeObj("assignPermissionTree");
				treeObj.expandAll(true);
				
				showMenuPermissions(tempMenuid);
		});
	}
	function addDiyDom(treeId, treeNode) {
		$("#" + treeNode.tId + "_ico").removeClass();
		$("#" + treeNode.tId + "_span").before('<span class="'+treeNode.icon+'"></span>');
	}
	
	
	
	//分配权限功能
	$("#assignPermission").click(function(){
		//1、获取到已经选中的所有权限的id
		var treeObj = $.fn.zTree.getZTreeObj("assignPermissionTree");
		var ids = new Array();
		$.each(treeObj.getCheckedNodes(true),function(){
			ids.push(this.id);
		});
		var idsStr = ids.join();
			 
		//2、组装给后台提交的数据
		var data = {mid:tempMenuid,perIds:idsStr};
		console.log(data);
		//3、发请求，完成权限分配功能
		$.post("${PATH}/menu/assignPermissionToMenu",data,function(result){
			if(result == "ok"){
				layer.msg("权限分配完成");
				$("#permissionModal").modal('hide');
			}else{
				layer.msg("权限分配失败");
			}
			
		})
	});

	
	//回显权限树
	function showMenuPermissions(menuid){
		$.get("${PATH}/menu/menuPermission?menuid="+menuid,function(data){
			//1、遍历每一个权限，在ztree中选中对应的节点
			$.each(data,function(){
				console.log(this);
				var treeObj = $.fn.zTree.getZTreeObj("assignPermissionTree");
				var node = treeObj.getNodeByParam("id", this.id, null); //根据指定的节点id搜索节点，null表示搜索整个树
				treeObj.checkNode(node,true,false);//需要回显的节点，是否勾选复选框，父子节点勾选是否联动（例如：勾选父节点，要不要把它的所有子节点都勾上，取消父节点勾选，要不要把它的所有子节点也都取消勾选）
			});
		});
	} 
    
    //分配权限结束===========================
    </script>
  </body>
</html>
